<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="bg_ab"></view>
			<view class="pr z2 ptb30">
				<view class="flex-box plr40">
					<view class="search_nav flex-box">
						<input confirm-type="search" @confirm="onSearch" v-model="q" type="text" placeholder="请输入关键词搜索"
							class="flex-grow-1 fs28 col0" placeholder-class="colb" />
						<view class="ico28_aft" @click="onSearch">
							<image src="https://admin.mosizp.cn/static/public/icon_search.png" mode="aspectFill" class="ico28"
								></image>
						</view>
					</view>
					<image @click="onSift()" src="https://admin.mosizp.cn/static/public/icon_sift1.png" mode="widthFix" class="ico44 ml40">
					</image>
				</view>

				<swiper class="swiper mt30 mlr30" v-if="banners.length>0" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in banners" @click="bindBannerJump(banner.minapp_url)">
						<image :src="cdnurl(item.image)" mode="aspectFill" class="banner"></image>
					</swiper-item>
				</swiper>
				<view class="notice_link flex-box mt20 mlr30">
					<view class="fs34 col3"><text class="colblue2">最新</text>发布</view>
					<view class="sq"></view>
					<template v-for="item in newJobList">
						<view @click="bindDetail(item.id)" class="flex-grow-1 fs24 col6 m-ellipsis">
							{{item.institution.name+item.name}}培训</view>
						<!-- <image src="https://admin.mosizp.cn/static/public/arrow_right_w.png" mode="aspectFill" class="ico20"></image> -->
					</template>
				</view>
				<view class="flex-box mt40 plr30">
					<view class="flex-grow-1 fs34 fwb col3">培训机构</view>
					<view class="col9 fs24" @click="moreInstitution()">查看全部</view>
					<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="widthFix" class="ico8 ml10"></image>
				</view>
				<scroll-view scroll-x="true" class="scroll">
					<view class="scroll_item" v-for="(item,index) in institutionList"
						@click="bindInstitutionDetail(item.id)">
						<view class="fs32 fwb col3 lh44 m-ellipsis">{{item.name}}</view>
						<view class="fs24 col6 lh32 mt10 m-ellipsis">{{item.purpose}} ｜ {{item.job_count}}个在发布培训</view>
						<view class="flex-box mt20">
							<image src="https://admin.mosizp.cn/static/public/icon_phone.png" mode="aspectFill" class="ico20"></image>
							<view class="flex-grow-1 pl15 m-ellipsis fs22 col9">{{item.contact_mobile}}</view>
						</view>
						<view class="flex-box mt15">
							<image src="https://admin.mosizp.cn/static/public/icon_address1.png" mode="aspectFill" class="ico20"></image>
							<view class="flex-grow-1 pl15 m-ellipsis fs22 col9">{{item.address}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="flex-box mt30 plr30">
					<view class="tab_item" :class="{active: query.status==1}" @click="bindStatusChange(1)">报名中</view>
					<view class="tab_item" :class="{active: query.status==2}" @click="bindStatusChange(2)">已报满</view>
					<view class="flex-grow-1"></view>
					<view class="btn2" @click="bindAddIntention()">培训意愿</view>
				</view>
				<view class="pt20 plr30">
					<train-list :jobs="jobs"></train-list>
					<view class="nothing" v-if="jobsMore.nothing">
						<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFit"></image>
						<text>暂无职位</text>
					</view>
					<view class="g-btn3-wrap" v-else>
						<view class="g-btn3" @click="fetchJob()">{{jobsMore.text}}</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import trainList from '../../components/train-list/train-list.vue';
	export default {
		components: {
			trainList
		},
		data() {
			return {
				
				banners: [],
				newJobList: [],
				query: {
					status: 1
				},
				jobs: [],
				jobsMore: {
					page: 1
				},
				institutionList: [],
				q: ''
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			
			this.fetchBanners();
			this.fetchNewJobs();
			this.fetchInstitution();
			this.fetchJob();
		},
		onReachBottom() {
			this.fetchJob();
		},
		methods: {
			bindBannerJump(url){
				if(url){
					uni.navigateTo({
						url: url
					})
				}
			},
			//搜索
			onSearch(e) {
				let query = {
					q: this.q
				};
				uni.navigateTo({
					url: '/pages/user/employ_skills_train?param=' + JSON.stringify(query)
				})
			},
			//筛选
			onSift() {
				uni.navigateTo({
					url: '/pages/user/train_sift',
					events: {

					}
				})
			},
			fetchBanners() {
				this.$core.get({
					url: 'xilujob.banner/banners/group/train_index',
					data: {},
					loading: false,
					success: ret => {
						this.banners = ret.data;
					}
				});
			},
			fetchNewJobs() {
				this.$core.get({
					url: '/xilujob.train/new_jobs',
					data: {},
					success: ret => {
						this.newJobList = ret.data;
					}
				});
			},
			fetchInstitution() {
				this.$core.get({
					url: '/xilujob.train/index',
					data: {
						pagesize: 4
					},
					success: ret => {
						this.institutionList = ret.data.data;
					}
				});
			},
			bindInstitutionDetail(id) {
				uni.navigateTo({
					url: '/pages/user/institution_info?id=' + id
				})
			},
			moreInstitution() {
				uni.navigateTo({
					url: '/pages/user/all_agencies'
				})
			},
			bindStatusChange(status) {
				this.query.status = status;
				this.jobs = [];
				this.jobsMore = {
					page: 1
				};
				this.fetchJob();
			},
			fetchJob() {
				let query = this.query;
				query.pagesize = 10;
				this.$util.fetch(this, 'xilujob.train/jobs', query, 'jobsMore', 'jobs', 'data', 'unique');
			},
			bindAddIntention() {
				if (!this.$core.getUserinfo(true)) {
					return;
				}
				uni.navigateTo({
					url: '/pages/user/add_train_interest'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.bg_ab {
		width: 100%;
		height: 537rpx;
		position: absolute;
		top: -176rpx;
		left: 0;
		z-index: 1;
		background: var(--primary);
		 border-radius: 100px / 50px; /* 完整椭圆 */
	}

	.search_nav {
		width: 586rpx;
		height: 86rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(183, 189, 202, 0.3);
		border-radius: 43rpx;
		padding-left: 40rpx;
		padding-right: 30rpx;
	}

	.swiper {
		width: 690rpx;
		height: 245rpx;
		border-radius: 18rpx;

		.banner {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 18rpx;
		}
	}

	.notice_link {
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding: 0 25rpx;

		.sq {
			width: 2rpx;
			height: 26rpx;
			background: #D8D8D8;
			border: 1px solid #979797;
			opacity: 0.3;
			margin-left: 25rpx;
			margin-right: 20rpx;
		}
	}

	.ico8 {
		width: 8rpx;
	}

	.scroll {
		margin-top: 20rpx;
		height: 235rpx;
		width: 100%;
		white-space: nowrap;

		.scroll_item {
			width: 570rpx;
			height: 235rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 14rpx;
			border: 1px solid #EEEEEE;
			padding: 25rpx 30rpx 30rpx;
			display: inline-block;
			vertical-align: top;
			margin-right: 20rpx;

			&:first-child {
				margin-left: 30rpx;
			}

			&:last-child {
				margin-right: 30rpx;
			}
		}
	}

	.tab_item {
		font-size: 34rpx;
		color: #666666;
		line-height: 48rpx;
		margin-right: 50rpx;
		display: inline-block;
		position: relative;
		vertical-align: top;

		&.active {
			font-weight: bold;
			color: #333333;
		}

		&.active::after {
			content: '';
			width: 28rpx;
			height: 6rpx;
			background: var(--primary);
			border-radius: 26rpx;
			position: absolute;
			left: 50%;
			bottom: -14rpx;
			transform: translateX(-50%);
		}
	}
</style>